<script setup>
import OrderAnalysis from '@/views/statistics/OrderAnalysis.vue'
import RegionOrUnitAnalysis from '@/views/statistics/RegionOrUnitAnalysis.vue'
import PopItem from '@/views/statistics/components/PopItem.vue'
import AreaPopup from '@/components/Popups/AreaPopup.vue'
import TimePopup from '@/components/Popups/TimePopup.vue'
import { usePermissionStore } from '@/stores/permission'
import { getCurrQuarter } from '@/utils/date.js'
import { getAreaByCode } from '@/utils/areaQuery.js'
import { useStatisticsFromStore } from '@/stores/statistics.js'
const { user } = usePermissionStore()
const activeName = ref('OrderAnalysis')
const areaName = ref(getAreaByCode(user.areaCode))
const areaCode = ref('')
const isAreaPopup = ref(false)
const isTimePopup = ref(false)
const { statistics } = useStatisticsFromStore()
const { start, end, currentYear, currentQuarter } = getCurrQuarter()
const QuarterTitle = currentYear + ' ' + currentQuarter
const time = ref(QuarterTitle)

const tabsIsShow = computed(() => {
  return user.level <= 2
})

// showPopup
const showPopup = (type) => {
  switch (type) {
    case 'area':
      isAreaPopup.value = true
      break
    case 'timeArr':
      isTimePopup.value = true
      break
  }
}
// areaConfirm
const areaConfirm = (label, code) => {
  areaName.value = label
  areaCode.value = code
  statistics.timeSpendRank.areaCode = code
}
const timeConfirm = (label) => {
  const dats = label.splice(1, 1)
  console.log(label, dats, '==')
  time.value = label.join(' ')
}

const times = ref({
  createTimeStart: start,
  createTimeEnd: end
})

watch(
  () => activeName.value,
  (val) => {
    time.value = QuarterTitle
    statistics.timeSpendRank = { ...times.value }
  }
)
</script>

<template>
  <div class="p-0 w-full h-full overflow-auto min-h-screen bg-#F8F9FC relative">
    <!--  切换 tabs  -->
    <van-tabs
      v-if="tabsIsShow"
      class="m-b12px z-99"
      style="position: sticky; top: 0"
      v-model="activeName"
      color="#36B374"
      title-active-color="#36B374"
    >
      <van-tab
        title-style="flex:none;"
        title-class="w-100px text-14px h-40px"
        title="工单分析"
        name="OrderAnalysis"
      ></van-tab>
      <van-tab
        title-style="flex:none;"
        title-class="w-125px text-14px h-40px"
        title="区域/单位分析"
        name="RegionOrUnitAnalysis"
      ></van-tab>
    </van-tabs>

    <!--  中间内容  -->
    <OrderAnalysis :areaCode="areaCode" v-if="activeName === 'OrderAnalysis'" />
    <RegionOrUnitAnalysis v-else-if="activeName === 'RegionOrUnitAnalysis'" />
    <!--  底部条件选择  -->
    <div class="select-none fixed box-border bottom-10px w-full z-99 px-16px">
      <div class="box-border w-full py-20px px-4 flex bg-#77787A rounded-4px">
        <template v-if="tabsIsShow && activeName === 'OrderAnalysis'">
          <PopItem :text="areaName" type="location" @tap="showPopup('area')" />
          <i class="w-[1px] h-[16px] mt-4px bg-[#E3E4E7]" />
        </template>
        <PopItem :text="time" type="time" @tap="showPopup('timeArr')" />
      </div>
    </div>
    <!-- 区域选择 -->

    <AreaPopup
      :value.sync="isAreaPopup"
      :columns.sync="areaCode"
      :areaName="areaName"
      @confirm="areaConfirm"
    />
    <!-- 时间选择 -->
    <TimePopup :show.sync="isTimePopup" @confirm="timeConfirm" />
  </div>
</template>

<style scoped lang="less"></style>
